import { useState, useImperativeHandle, Ref } from 'react';
import { Modal, message } from 'antd';

export interface InfoModalProps {
	showModal: (params: any) => void;
	name: () => void;
}

interface Props {
	innerRef: Ref<InfoModalProps | undefined>;
}

const InfoModal = (props: Props) => {
	const [modalVisible, setModalVisible] = useState(false);

	useImperativeHandle(
		props.innerRef,
		(): InfoModalProps => ({
			showModal,
			name: () => {
				console.log('This is InfoModal');
				return 'InfoModal';
			},
		})
	);

	const showModal = (params: { name: number }) => {
		setModalVisible(true);
	};

	const handleOk = () => {
		setModalVisible(false);
		message.success('修改用户信息成功 🎉🎉🎉');
	};

	const handleCancel = () => {
		setModalVisible(false);
	};
	return (
		<Modal title='个人信息' open={modalVisible} onOk={handleOk} onCancel={handleCancel} destroyOnClose={true}>
			<p>一柯没有被讨厌的小白菜</p>
		</Modal>
	);
};
export default InfoModal;
